<template>
	<view class="menu">
		<view class="menu_item" v-for="(item, index) in data" :key="index" @click="change(item)">
			{{item.name}}
		</view>
	</view>
</template>

<script setup>
	defineProps({
		data:Array
	})
	
	const emits = defineEmits(['change'])
	const change = e => {
		emits('change', e);
	}
</script>

<style scoped lang="scss">
	.menu {
		&_item {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #f5f6f7;
			text-align: center;

			&:active {
				background: #f5f6f7;
			}

			&:last-child {
				border-bottom: none;
			}
		}

	}
</style>